<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border-radius详解</title>
    <style>
        /*
        border-radius: none　｜　length{1,4} [/ length{1,4}
        */
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height:auto;
            border:1px solid #aaa;
            margin: 100px auto;
        }
        #box div{
            margin-top: 50px;
        }
        .box1{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px;
            /*border-radius:100px 最大是100px（100px/100px=100%） 不会超过宽度*/
        }
        .box2{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px 50px;
            /*border-radius:100% 50%;效果同上 （50px/100px=50%)*/
        }
        .box3{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px  50px 25px;
            /*border-radius: 100% 50% 25%; 同上*/
        }
        .box4{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px 75px 50px 25px;
            /*border-radius: 100% 75% 50% 25%; 同上*/
            /*border-radius:top-left,top-right,bottom-right,bottom-left*/
        }
        .box5{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px /50px;
            /*border-radius: 100% /50%; 同上*/
            /*border-radius:top-left,top-right,bottom-right,bottom-left*/
        }
        .box6{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px 50px/50px 0px;
            /*border-radius: 100% 50%/50% 0%; 同上*/
            /*对于每个角度来说：只要水平或竖直有一个为0则另外一个值也无效*/
            /*border-radius:top-left,top-right,bottom-right,bottom-left*/
        }
        .box7{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px 75px 50px/50px 25px 0px;
            /*border-radius: 100% 75% 50%/50% 25% 0%; 同上*/
            /*对于每个角度来说：只要水平或竖直有一个为0则另外一个值也无效*/
            /*border-radius:top-left,top-right,bottom-right,bottom-left*/
        }
        .box8{
            width: 100px;
            height: 100px;
            border:5px solid blue;
            border-radius: 100px 75px 50px 25px/75px 50px 25px 0px;
            /*border-radius: 100% 75% 50% 25%/75% 50% 25% 0%; 同上*/
            /*对于每个角度来说：只要水平或竖直有一个为0则另外一个值也无效*/
            /*border-radius:top-left,top-right,bottom-right,bottom-left*/
        }
    </style>
</head>
<body>
<div id="box">
    <div class="box1">一个值的border-radius</div>
    <hr/>
    <div class="box2">两个值的border-radius</div>
    <hr/>
    <div class="box3">三个值的border-radius</div>
    <hr>
    <div class="box4">四个值的border-radius</div>
    <hr>
    <div class="box5">水平+垂直:一个值</div>
    <hr>
    <div class="box6">水平+垂直:两个值</div>
    <hr>
    <div class="box7">水平+垂直:三个值</div>
    <hr>
    <div class="box8">水平+垂直:四个值</div>
</div>
</body>
</html>